<template>
  <!-- 歌单列表 -->
  <div id="songSheet">
    <van-nav-bar left-text="歌单"
                 left-arrow
                 fixed
                 @click-left="$router.go(-1)" />
    <header style="margin-top: 46px">
      <van-card>
        <template #thumb>
          <van-image width="80"
                     height="80"
                     :src="userPlaylist.coverImgUrl" />
        </template>

        <template #title>
          <p style="font-size: 16px; font-weight: 600; padding: 3px 0 5px 0">
            {{ userPlaylist.name }}
          </p>
        </template>

        <template #desc>
          <van-image style="float: left"
                     width="30"
                     height="30"
                     round
                     :src="userInfo.avatarUrl" />
          <span @click="handleUserInfo"
                style="float: left; padding: 8px 0 0 5px">{{ userInfo.nickname }}
            <van-icon style="float: right; padding-top: 3px"
                      name="arrow" />
          </span>
        </template>
        <template #bottom
                  v-if="editBool">
          <span style="float: left; font-size: 12px">编辑信息</span>
          <van-icon style="float: left; padding-top: 5px"
                    name="arrow" />
        </template>
      </van-card>
    </header>
    <div class="btn-warp">
      <van-divider>
        <van-button icon="passed"
                    style="border-radius: 25px 0 0 25px"
                    type="default">收藏</van-button>
        <van-button icon="records"
                    type="default">评论</van-button>
        <van-button icon="share-o"
                    style="border-radius: 0 25px 25px 0"
                    type="default">分享</van-button>
      </van-divider>
    </div>
    <div class="content">
      <van-cell :border="false"
                title="播放全部"
                style="margin: 10px 0"
                @click="handlePlayWhole">
        <template #icon>
          <van-icon style="padding-right: 10px"
                    size="25"
                    color="red"
                    name="play-circle-o" />
        </template>
        <template #right-icon>
          <van-icon style="line-height: 24px"
                    size="15"
                    color="#000"
                    name="down" />
        </template>
      </van-cell>

      <van-cell :border="false"
                v-for="(item, index) in songDetaliList"
                :key="index"
                :title="
          item.name.length > 19 ? item.name.slice(0, 19) + '...' : item.name
        "
                :label="item.ar[0].name"
                @click="handleClickMusic(index)">
        <template #icon>
          <span class="index">{{ index + 1 }}</span>
        </template>
        <template #right-icon>
          <van-icon name="ellipsis"
                    size="20"
                    style="transform: rotate(90deg); padding-right: 20px" />
        </template>
      </van-cell>
    </div>
    <Loading :loadingShow="loadingShow" />
  </div>
</template>

<script>
import Loading from '@/components/loading'
import { getPlaylistDetail, getSongDetail } from '@/api/songSheet'
import { getUserDetalis } from '@/api/userInfo'
import { EventBus } from '../../../currency'
export default {
  name: 'songSheet',
  data() {
    return {
      userPlaylist: {},
      userInfo: {},
      songDetaliList: [],
      editBool: false,
      userId: '',
      loadingShow: false,
    }
  },
  components: { Loading },
  methods: {
    handleUserInfo() {
      if (
        this.userInfo.nickname != this.$store.state.userInfo.userData.nickname
      ) {
        this.$router.push({
          path: '/userDtl',
          query: {
            id: this.userId,
          },
        })
      } else {
        this.$router.push({
          path: '/user',
          query: {
            id: this.userId,
          },
        })
      }
    },
    // 播放全部
    handlePlayWhole() {
      this.$store.commit('getSongList', this.songDetaliList)
      EventBus.$emit('playMusic', '播放音乐')
    },
    handleClickMusic(index) {
      this.$store.commit('getIndex', index)
      this.$store.commit('getSongList', this.songDetaliList)
      EventBus.$emit('playMusic', '播放音乐')
    },
    initData(id) {
      this.loadingShow = true
      let ids = []
      let cookie = this.$store.state.userInfo.cookie
      getPlaylistDetail(id, cookie).then(async (res) => {
        this.initUserData(res.playlist.userId)
        this.userPlaylist = res.playlist
        await this.userPlaylist.trackIds.forEach((item) => {
          ids.push(item.id)
        })
        getSongDetail(ids, cookie).then((res) => {
          this.songDetaliList = res.songs
        })
        this.songDetaliList = this.userPlaylist.tracks
        this.loadingShow = false
      })
    },
    initUserData(id) {
      this.userId = id
      if (this.$store.state.userInfo.userData) {
        if (this.$store.state.userInfo.userData.userId == id) {
          this.userInfo = this.$store.state.userInfo.userData
          this.editBool = true
        } else {
          getUserDetalis(id, '').then((res) => {
            this.userInfo.avatarUrl = res.profile.avatarUrl
            this.userInfo.nickname = res.profile.nickname
          })
          this.editBool = false
        }
      } else {
        getUserDetalis(id, '').then((res) => {
          this.userInfo.avatarUrl = res.profile.avatarUrl
          this.userInfo.nickname = res.profile.nickname
        })
      }
    },
  },
  created() {
    document.title = '首页'
    this.initData(this.$route.query.id)
  },
}
</script>

<style scoped>
#songSheet {
  width: 100%;
  height: 100%;
}
#songSheet .van-card {
  background-color: #fff;
}
#songSheet /deep/ .van-nav-bar .van-icon,
#songSheet /deep/ .van-nav-bar__text {
  color: #000;
}
.btn-warp {
  text-align: center;
}
.van-button--normal {
  padding: 0 25px;
}
.van-button {
  height: 33px;
}
.index {
  text-align: center;
  width: 15px;
  line-height: 46px;
  padding-right: 20px;
}
.van-cell {
  padding: 5px 16px;
}
</style>